<template>
  <div>
    <p>Setup Script Component</p>
    <form @submit.prevent="submit">
      <input type="text" v-model="form.name" />
      <button type="submit">submit</button>
    </form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

console.log('setup SetupScriptComponent once')

defineOptions({
  name: 'SetupScriptComponent',
})

const { modelValue } = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['update:modelValue'])

const form = reactive({ ...modelValue })

const submit = () => {
  emit('update:modelValue', { ...form })
}
</script>

<style scoped lang="scss">
form {
  display: flex;
  gap: 8px;
}
</style>
